<template>
	<div
		:class="[
			'app-editor-container',
			'app-mob-datetime-picker',
			`app-mob-datetime-picker-${name}`,
		]"
	>
		<van-field
			v-model="textValue"
			readonly
			@click="openPopup"
			:placeholder="placeholder"
		></van-field>
		<van-popup
			v-model:show="isOpenPop"
			teleport="body"
			position="bottom"
			round
			class="app-mob-datetime-picker__popup"
		>
			<template v-if="tabs.length > 1" #default>
				<van-picker-group
					:title="title"
					:tabs="tabs"
					@confirm="onConfirm"
					@cancel="onCancel"
				>
					<van-date-picker
						v-bind="$attrs"
						:formatter="formatter"
						:columns-type="dateType"
						v-model="curDateValue"
						:disabled="disabled"
						@change="onDateChange"
					>
					</van-date-picker>
					<van-time-picker
						v-bind="$attrs"
						:formatter="formatter"
						:columns-type="timeType"
						v-model="curTimeValue"
						:disabled="disabled"
						@change="onTimeChange"
					>
					</van-time-picker>
				</van-picker-group>
			</template>
			<template v-else #default>
				<van-date-picker
					v-bind="$attrs"
					:formatter="formatter"
					:columns-type="dateType"
					v-if="dateType.length > 0"
					v-model="curDateValue"
					:disabled="disabled"
					@change="onDateChange"
					@confirm="onConfirm"
					@cancel="onCancel"
				>
				</van-date-picker>
				<van-time-picker
					v-bind="$attrs"
					:formatter="formatter"
					v-if="timeType.length > 0"
					:columns-type="timeType"
					v-model="curTimeValue"
					:disabled="disabled"
					@change="onTimeChange"
					@confirm="onConfirm"
					@cancel="onCancel"
				>
				</van-time-picker>
			</template>
		</van-popup>
	</div>
</template>
<script lang="ts" setup>
import { Ref } from 'vue';
import { dateFormat, IEvent } from '@/core';
import { datePickerProps } from './date-picker';
import { useEditorTypeParams } from '@/hooks/use-editor';
interface EditorEmit {
	(name: 'editor-event', value: IEvent<string>): void;
}
const props = defineProps(datePickerProps);
const emit = defineEmits<EditorEmit>();
// 类型校验
const { validateConfig } = useEditorTypeParams();
validateConfig();
const text = {
	ok: App.ts('common.generic.okText', '确定'),
	cancel: App.ts('common.generic.onCancel', '取消'),
};
const curDateValue: Ref<any[]> = ref([]); //日期回显传递值
const curTimeValue: Ref<any[]> = ref([]); //时间回显传递值

const tempDateValue: Ref<any[]> = ref([]); //日期传递值
const tempTimeValue: Ref<any[]> = ref([]); //时间传递值

const isOpenPop = ref(false); //打开模态
const textValue = ref(''); //选中时间展示值
const tabs: Ref<any[]> = ref([]); //分页tab
watch(
	() => props.value,
	(newVal: any, oldVal: any) => {
		if (!newVal) {
			curDateValue.value = [];
			curTimeValue.value = [];
			tempDateValue.value = [];
			tempTimeValue.value = [];
			textValue.value = '';
			//无初始值时给临时数据赋上当前时间
			const tempDate = new Date();
			curDateValue.value = [
				`${tempDate.getFullYear()}`,
				`${
					tempDate.getMonth() + 1 < 10
						? '0' + (tempDate.getMonth() + 1)
						: tempDate.getMonth() + 1
				}`,
				`${
					tempDate.getDate() < 10
						? '0' + tempDate.getDate()
						: tempDate.getDate()
				}`,
			];
			curTimeValue.value = [
				`${
					tempDate.getHours() < 10
						? '0' + tempDate.getHours()
						: tempDate.getHours()
				}`,
				`${
					tempDate.getMinutes() < 10
						? '0' + (tempDate.getMinutes() + 1)
						: tempDate.getMinutes() + 1
				}`,
				`${
					tempDate.getSeconds() < 10
						? '0' + tempDate.getSeconds()
						: tempDate.getSeconds()
				}`,
			];
			tempDateValue.value = [
				`${tempDate.getFullYear()}`,
				`${
					tempDate.getMonth() + 1 < 10
						? '0' + (tempDate.getMonth() + 1)
						: tempDate.getMonth() + 1
				}`,
				`${
					tempDate.getDate() < 10
						? '0' + tempDate.getDate()
						: tempDate.getDate()
				}`,
			];
			tempTimeValue.value = [
				`${
					tempDate.getHours() < 10
						? '0' + tempDate.getHours()
						: tempDate.getHours()
				}`,
				`${
					tempDate.getMinutes() < 10
						? '0' + (tempDate.getMinutes() + 1)
						: tempDate.getMinutes() + 1
				}`,
				`${
					tempDate.getSeconds() < 10
						? '0' + tempDate.getSeconds()
						: tempDate.getSeconds()
				}`,
			];
			curTimeValue.value.splice(curTimeValue.value.length - props.timeType);
			tempTimeValue.value.splice(tempTimeValue.value.length - props.timeType);
			return;
		}
		textValue.value = newVal;
		const tempValue = newVal.split(' ');
		if (tempValue.length == 2) {
			//有日期，有时间
			curDateValue.value = tempValue[0].split('-');
			tempDateValue.value = tempValue[0].split('-');
			curTimeValue.value = tempValue[1].split(':');
			tempTimeValue.value = tempValue[1].split(':');
		} else if (tempValue.length == 1) {
			if (tempValue[0].indexOf('-') < 0) {
				//时间
				curTimeValue.value = tempValue[0].split(':');
				tempTimeValue.value = tempValue[0].split(':');
			} else {
				//日期
				curDateValue.value = tempValue[0].split('-');
				tempDateValue.value = tempValue[0].split('-');
			}
		}
	},
	{
		immediate: true,
	}
);
onMounted(() => {
	initTabs();
});

const initTabs = () => {
	if (props.dateType.length > 0) {
		tabs.value.push(App.ts('common.datepicker.selectdate', '选择日期'));
	}
	if (props.timeType.length > 0) {
		tabs.value.push(App.ts('common.datepicker.selecttime', '选择时间'));
	}
};

const formatter = (type: any, option: any) => {
	if (type === 'year') {
		option.text += '年';
	}
	if (type === 'month') {
		option.text += '月';
	}
	if (type === 'day') {
		option.text += '日';
	}
	if (type === 'hour') {
		option.text += '时';
	}
	if (type === 'minute') {
		option.text += '分';
	}
	if (type === 'second') {
		option.text += '秒';
	}
	return option;
};

const openPopup = () => {
	isOpenPop.value = true;
};

const onConfirm = (value: any) => {
	isOpenPop.value = false;
	let timeValue: any;
	let dateValue: any;
	let dateTimeValue: any;
	if (tempTimeValue.value.length == 1) {
		tempTimeValue.value.push('00');
	}
	timeValue = [tempTimeValue.value.join(':')].join(' ');
	if (tempDateValue) {
		dateValue = tempDateValue.value.join('-');
	}

	dateTimeValue = dateValue + ' ' + timeValue;
	const date = dateFormat(new Date(dateTimeValue), props.format);
	emit('editor-event', {
		name: `${props.name}`,
		action: 'valueChange',
		data: date,
	});
};

const onTimeChange = (value: any) => {
	tempTimeValue.value = value.selectedValues;
};

const onDateChange = (value: any) => {
	tempDateValue.value = value.selectedValues;
};
const onCancel = (value: any) => {
	isOpenPop.value = false;
};
</script>
